<template>
    <div class="mt30">
        <el-row  :gutter="40">
            <el-col :span="12">
                <div class="img" @click="toKz"><img src="@/assets/icon/xxjs1.png" alt=""><span class="imgTitle">抗震设防参数</span></div>
            </el-col>
            <el-col :span="12">
                <div class="img" @click="toHdc"><img src="@/assets/icon/xxjs2.png" alt=""><span class="imgTitle">活断层信息</span></div>
            </el-col>
            <el-col :span="12">
                <div class="img" @click="toYj"><img src="@/assets/icon/xxjs3.png" alt=""><span class="imgTitle">应急避难场所</span></div>
            </el-col>
            <el-col :span="12">
                <div class="img" @click="toLs"><img src="@/assets/icon/xxjs4.png" alt=""><span class="imgTitle">历史地震信息</span></div>
            </el-col>
        </el-row>

    </div>
</template>

<script setup name="infoIndex">
const router = useRouter();
// 跳转抗震设防参数
function toKz(){
    router.push('/informationRetrieval/seismicParameter')
}

// 跳转活断层信息
function toHdc(){
    router.push('/informationRetrieval/activeFaultInfo')
}

// 跳转应急避难场所
function toYj(){
    router.push('/informationRetrieval/emergencyShelter')
}

// 跳转历史地震信息
function toLs(){
    router.push('/informationRetrieval/historicalSeismicInformation')
}
</script>

<style scoped lang="scss">
.img {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    img{
        width: 100%;
    }
    .imgTitle{
        display: inline-block;
        width: 100%;
        height: 45px;
        border:1px solid #707070;
        background-color: #107ce5;
        opacity:0.8;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 45px;
        font-weight: bold;
    }
}
</style>